<template>
  <div>
    <h5 class="text-muted">
      当前任务：项目
      <span v-if="isUserTown">审批</span>
      <sapn v-else>复审</sapn>
    </h5>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          :auto-top="true"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="企业名称查询"
          :clearable="true"
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.lender_idcard"
          placeholder="身份证号码查询"
          :clearable="true"
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="经营者名称查询"
          :clearable="true"
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox
          v-model="params.has_ele_fee"
          border
          :true-label="1"
          false-label=""
          @change="getData()"
        >
          电表
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:bank="scope">
        <el-popover placement="top-start" title="银行项目经理" width="200" trigger="hover">
          <div>
            <div>{{ `姓名： ${scope.row.bank_approved_person || '-'};` }}</div>
            <div>{{ `电话： ${scope.row.bank_approved_person_mobile || '-'}` }}</div>
          </div>
          <div slot="reference">
            <div class="text-left">
              {{ scope.row.bank_name }}
            </div>
          </div>
        </el-popover>
      </template>

      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>

      <template v-slot:resName="scope">
        <el-popover placement="top-start" title="项目经理" width="200" trigger="hover">
          <div>
            <div>{{ `A角： ${scope.row.res_a_name || '-'};` }}</div>
            <div>{{ `B角： ${scope.row.res_b_name || '-'}` }}</div>
          </div>
          <span slot="reference" class="text-left">
            <div class="text-truncate">{{ `A角： ${scope.row.res_a_name || '-'};` }}</div>
            <div class="text-truncate">{{ `B角： ${scope.row.res_b_name || '-'}` }}</div>
          </span>
        </el-popover>
      </template>
      <template v-slot:review="scope">
        <div v-if="isUserTown" :title="scope.row.res_fail_reason">
          <span v-if="+scope.row.res_status === 0" class="status-label badge-warning">
            待项目经理复审
          </span>
          <span
            v-else-if="+scope.row.res_status === 2"
            :title="scope.row.res_fail_reason"
            class="status-label badge-danger"
          >
            项目经理复审未通过
          </span>
          <span v-else-if="+scope.row.res_status_bus === 0" class="status-label badge-info">
            待业务部负责人复审
          </span>
          <span
            v-else-if="+scope.row.res_status_bus === 2"
            :title="scope.row.res_fail_reason"
            class="status-label badge-danger"
          >
            业务部负责人复审未通过
          </span>
          <span v-else-if="+scope.row.res_status_risk === 0" class="status-label badge-info">
            待风控部负责人复审
          </span>
          <span
            v-else-if="+scope.row.res_status_risk === 2"
            :title="scope.row.res_fail_reason"
            class="status-label badge-danger"
          >
            风控部负责人复审未通过
          </span>
          <span v-else-if="+scope.row.res_status_corp === 0" class="status-label badge-info">
            待公司负责人复审
          </span>
          <span
            v-else-if="+scope.row.res_status_corp === 2"
            :title="scope.row.res_fail_reason"
            class="status-label badge-danger"
          >
            公司负责人复审未通过
          </span>
          <span class="status-label badge-success" v-else-if="+scope.row.res_status_corp === 1">
            复审通过
          </span>
        </div>
        <div v-else :title="scope.row.res_fail_reason">
          <span v-if="+scope.row.city_res_status === 0" class="status-label badge-warning">
            待项目经理复审
          </span>
          <span
            v-else-if="+scope.row.city_res_status === 2"
            :title="scope.row.res_fail_reason"
            class="status-label badge-danger"
          >
            项目经理复审未通过
          </span>
          <span v-else-if="+scope.row.city_res_status_bus === 0" class="status-label badge-info">
            待业务部复审
          </span>
          <span
            v-else-if="+scope.row.city_res_status_bus === 2"
            :title="scope.row.res_fail_reason"
            class="status-label badge-danger"
          >
            业务部复审未通过
          </span>
          <span v-else-if="+scope.row.city_res_status_risk === 0" class="status-label badge-info">
            待风控部复审
          </span>
          <span
            v-else-if="+scope.row.city_res_status_risk === 2"
            :title="scope.row.res_fail_reason"
            class="status-label badge-danger"
          >
            风控部复审未通过
          </span>
          <span v-else-if="+scope.row.city_res_status_corp === 0" class="status-label badge-info">
            待公司负责人复审
          </span>
          <span
            v-else-if="+scope.row.city_res_status_corp === 2"
            :title="scope.row.res_fail_reason"
            class="status-label badge-danger"
          >
            公司负责人复审未通过
          </span>
          <span
            class="status-label badge-success"
            v-else-if="+scope.row.city_res_status_corp === 1"
          >
            复审通过
          </span>
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <!-- 数字信用档案 -->
    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      :before-close="handleCreditClose"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="调查报告">
          <credit-file :query-id="queryId"></credit-file>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 区县复审 -->
    <review-file-dialog
      :visible.sync="editVisible"
      :related-data="editRow"
      @success="handleFileSuccess"
    ></review-file-dialog>

    <!-- 市担保复审 -->
    <review-file-credit
      :visible.sync="creditVisible"
      @success="handleFileSuccess"
      :related-data="editCredit"
    ></review-file-credit>

    <review-table :visible.sync="reviewVisible" :related-data="relatedData"></review-table>

    <attach-cmpt :visible.sync="attachVisible" :customer-related-id="attachRelatedId"></attach-cmpt>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import CreditFile from '@/credit/components/creditFile/InvestigateReport'
import ReviewFileDialog from '@/credit/views/county/mission/ReviewFileDialog'
import ReviewTable from '@/credit/views/county/mission/components/ReviewTable'
// import ReviewFileView from '@/credit/views/county/mission/components/ReviewFileView'
import AttachCmpt from '@/credit/views/city/program/Attach'
import ReviewFileCredit from '@/credit/views/county/mission/ReviewFileCredit'
import { enumFarmType, enumMainType } from '@/credit/plugins/enum'
// import {
//   enumReApproval
// } from '@/gov/plugins/enum'
import SelectAddress from '@/components/select/SelectAddress'
// const enumStatusStyle = {
//   0: 'info',
//   1: 'success',
//   2: 'danger'
// }

export default {
  components: {
    SelectAddress,
    CreditFile,
    ReviewFileDialog,
    // ReviewFileView,
    ReviewTable,
    AttachCmpt,
    ReviewFileCredit,
  },
  props: {},
  data() {
    return {
      params: {
        index: 1,
        size: 10,
        lender_idcard: '',
        customer_name: '',
        corp_name: '',
        'is_approval.eq': 1,
        'submit_type.in': '1,2',
        'claim_status.eq': 1,
        'service_id.eq': '',
      },
      loading: false,
      attachVisible: false,
      attachRelatedId: '',
      tableName: 'customer_related_view',
      tableData: [],
      totalCount: 0,
      tableColumns: [
        {
          attrs: { label: '主体名称', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        {
          attrs: { label: '企业类型', prop: 'farm_type', align: 'center' },
          process: v => enumFarmType[v] || '-',
        },
        { attrs: { label: '经营者姓名', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '申请金额（万元）', prop: 'apply_funds', align: 'center' } },
        {
          attrs: { label: '银行预审金额（万元）', prop: 'bank_approved_funds', align: 'center' },
          process: v => v || '-',
        },
        { attrs: { label: '担保年限（年）', prop: 'load_years', align: 'center' } },
        {
          attrs: { label: '是否联保', prop: 'is_join_gua', align: 'center' },
          process: v => enumMainType[v],
        },
        { attrs: { label: '认领银行', align: 'center' }, slot: 'bank' },
        { attrs: { label: '项目经理', align: 'center' }, slot: 'resName' },
        { attrs: { label: '项目复审', align: 'center' }, slot: 'review' },
        // { attrs: { label: '项目经理复审', prop: 'res_status', align: 'center' }, process: v => enumReApproval[v] },
        // { attrs: { label: '业务部负责人复审', prop: 'res_status_bus', align: 'center' }, process: v => enumReApproval[v] },
        // { attrs: { label: '风控部负责人复审', prop: 'res_status_risk', align: 'center' }, process: v => enumReApproval[v] },
        // { attrs: { label: '公司负责人复审', prop: 'res_status_corp', align: 'center' }, process: v => enumReApproval[v] },
        {
          attrs: { label: '操作', align: 'center', minWidth: 150 },
          operations: [
            {
              content: '审批', // 区县审批
              icon: 'fa fa-edit',
              event: this.handleEdit,
              ifRender: row => this.editButton(row),
            },
            {
              content: '审批', // 市担保审批
              icon: 'fa fa-edit',
              event: this.handleCreditEdit,
              ifRender: row => this.corpButton(row),
            },
            {
              content: '审批报告',
              icon: 'fa fa-print',
              event: this.handleReview,
              ifRender: row => !this.editButton(row),
            },
            { content: '信用档案卡', icon: 'fa fa-file-text', event: this.handleView },
            {
              content: '上传附件',
              icon: 'fa fa-file-image-o',
              event: this.hanleAttach,
            },
          ],
        },
      ],

      // 信用档案
      queryId: '',
      reportVisible: false,

      // 复审
      editVisible: false,
      editRow: {},

      creditVisible: false,
      editCredit: {},

      reviewVisible: false,
      relatedData: {},
    }
  },
  computed: {
    ...mapGetters(['user', 'userId', 'clientId', 'job']),
    isManager() {
      return ['org_credit_super', 'org_c_manage', 'org_r_emp', 'org_r_manage', 'org_corp'].includes(
        this.job
      )
    },
    isUserTown() {
      return this.user.orgRegionLever === 3
    },
  },
  watch: {
    $route(route) {
      if (route.name === 'missionReview') {
        this.getData()
      }
    },
  },
  created() {
    if (this.isUserTown) {
      this.params['service_id.eq'] = this.clientId
    } else {
      this.params['recommend_service.eq'] = this.clientId
      this.params['is_join_gua.eq'] = 1
    }
    this.getData()
  },
  mounted() {},
  methods: {
    hanleAttach(row) {
      this.attachVisible = true
      this.attachRelatedId = row.customer_related_id
    },
    editButton(row) {
      if (!this.isUserTown) {
        return false
      }
      if (+row.res_status !== 1 && (this.userId === row.res_a || this.userId === row.res_b)) {
        return true
      }
      if (this.job === 'org_c_manage' && +row.res_status_bus !== 1 && +row.res_status === 1) {
        return true
      }
      if (this.job === 'org_r_manage' && +row.res_status_risk !== 1 && +row.res_status_bus === 1) {
        return true
      }
      if (this.job === 'org_corp' && +row.res_status_corp !== 1 && +row.res_status_risk === 1) {
        return true
      }
      return false
    },
    corpButton(row) {
      if (this.isUserTown || +row.res_status_corp !== 1) {
        return false
      }
      if (+row.city_res_status !== 1) {
        return true
      }
      if (
        (this.job === 'org_c_manage' || this.job === 'org_c_emp') &&
        +row.city_res_status_bus !== 1
      ) {
        return true
      }
      if (
        (this.job === 'org_r_manage' || this.job === 'org_r_emp') &&
        +row.city_res_status_risk !== 1 &&
        +row.city_res_status_bus === 1
      ) {
        return true
      }
      if (
        this.job === 'org_corp' &&
        +row.city_res_status_risk === 1 &&
        +row.city_res_status_corp !== 1
      ) {
        return true
      }
      return false
    },
    async getData(index = 1) {
      this.params.index = index
      const params = { ...this.params }
      const status = this.$route.query.status
      if (status !== undefined) {
        if (this.isUserTown) {
          params['project_res_status.eq'] = status
        } else {
          if (+status === 3) {
            params['orwhere.project_res_status.eq'] = status
            params['orwhere.city_project_res_status.eq'] = status
          } else {
            // params['project_res_status.eq'] = 2
            params['city_project_res_status.eq'] = status
          }
        }
      }
      if (!this.isManager) {
        params['orWhere.res_a.eq'] = this.userId
        params['orWhere.res_b.eq'] = this.userId
      }

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, {
          create_time: 'desc',
        })
      )
      this.loading = false

      const data = (res && res.data) || {}
      this.totalCount = data.totalCount
      this.tableData = data.data || []
    },
    handleEdit(row) {
      this.editRow = row
      this.editVisible = true
    },
    handleCreditEdit(row) {
      this.editCredit = row
      this.creditVisible = true
    },
    handleReview(row) {
      this.reviewVisible = true
      this.relatedData = row
    },
    handleView(row) {
      this.queryId = row.customer_related_id
      this.reportVisible = true
    },
    handleFileSuccess() {
      this.$store.dispatch('getTaskCountTown')
      this.getData()
    },
    handleCreditClose() {
      this.reportVisible = false
      this.getData(this.params.index)
    },
  },
}
</script>
<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
